<template>
  <div class="content">
    <div class="water">
      <div class="water-row">
        <div class="water-box">
          <div class="water-title">
            <p>站点运行情况<i class="gl"></i><i class="gl"></i></p>
          </div>
          <div class="water-mian">
            <div>
              <div class="wave">
                <div class="water-mun">665</div>
              </div>
              <p>总投入站点</p>
            </div>
            <div>
              <div class="wave wave2">
                <div class="water-mun">664</div>
              </div>
              <p>在线站点</p>
            </div>
            

            <div class="water-mian-eq">
              <p>
                <i class="fa fa-check-square" aria-hidden="true"></i> 
                开启设备</p>
              <p>水泵 <strong>{{deviceOnCount.water}}</strong> 个</p>
              <p>风机 <strong>{{deviceOnCount.fan}}</strong> 个</p>
            </div>
          </div>
          <div class="water-mian-data">
            <div>
              <p><i class="fa fa-tint" aria-hidden="true"></i> 水质情况</p>
              <div>
                <span>达标站点 <strong>664</strong> 个</span> |
                <span>达标率 <strong>99.9</strong> %</span>
              </div>
            </div>
            
            <div>
              <p><i class="fa fa-calendar-check-o" aria-hidden="true"></i> 昨日情况</p>
              <div>
                <span>处理水 <strong>5123</strong> 吨</span> |
                <span>成本 <strong>0.67</strong>kWh/吨</span>
              </div>
            </div>            
          </div>
        </div>
        <div class="water-box">
          <div class="water-title">
            <p>当前设备总时长（小时）<i class="gl"></i><i class="gl"></i></p>
          </div>
          <chart :options="chart1" auto-resize></chart>
        </div>
      </div>
      <div class="water-row">
        <div class="water-box">
          <div class="water-title">
            <p>近7日总设备运行时长 <i class="gl"></i><i class="gl"></i></p>
          </div>
          <chart :options="chart2" auto-resize></chart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'waterB',
    data () {
      return {
        chart1: {
          color: ['#0d2dd7','#9d4fff','#7ee5ff','#2b5cdf'],
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            show: false,
          },  
          series : [
            {
              name:'总时长',
              type:'pie',
              radius : ['25%','75%'],
              center: ['50%', '50%'],
              data:[
                {value:435, name:'主曝气风机'},
                {value:310, name:'副曝气风机'},
                {value:274, name:'主提升泵'},
                {value:235, name:'副提升泵'},
              ],
              label: {
                normal: {
                  textStyle: {
                    color: '#000237'
                  }
                }
              },
              labelLine: {
                normal: {
                  lineStyle: {
                    color: '#000237'
                  },
                  length: 10,
                  length2: 60
                }
              }
            }
          ]
        },
        chart2: {
          color: ['#0d2dd7','#9d4fff','#7ee5ff','#2b5cdf'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: [ '主提升泵', '副提升泵','主曝气风机', '副曝气风机'],
            top: 20,
            right:'10%',
            textStyle: {color: '#000237'}
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {show: false},
              data: ['06-21', '06-22', '06-23', '06-24', '06-25', '06-26', '06-27'],
              axisLine: {lineStyle: {color: '#000237'}}
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {lineStyle: {color: '#000237'}},
              splitLine: {lineStyle: {color: 'rgba(0,0,0,.1)'}}
            }
          ],
          series: [
            {
              name: '主提升泵',
              type: 'bar',
              label: {
                show: true,
                position: 'top'
              },
              data: [150, 232, 201, 154, 190, 154, 256]
            },
            {
              name: '副提升泵',
              type: 'bar',
              label: {
                show: true,
                position: 'top'
              },
              data: [98, 77, 101, 99, 40, 214, 180]
            }, 
            {
              name: '主曝气风机',
              type: 'bar',
              width: '20%',
              label: {
                show: true,
                position: 'top'
              },
              data: [320, 332, 301, 334, 390, 236, 314]
            },
            {
              name: '副曝气风机',
              type: 'bar',
              label: {
                show: true,
                position: 'top'
              },
              data: [220, 182, 191, 234, 290, 253, 241]
            },
             
            
          ]
        },
        agencyWholeData: {},
        deviceOnCount: {}
      }
    },
    mounted: function () {
      this.getData()
    },
    methods: {
      getData: function () {
        this.$http('/vqdisplay/devicerunning/data')
        .then( response=> {
          let _data = response.data.body  
          // console.log(_data)
          this.agencyWholeData = _data.agencyWholeData
          this.deviceOnCount = _data.deviceOnCount
          this.chart1.series[0].data = _data.deviceUseTimePie.series

          this.chart2.xAxis[0].data = _data.deviceUseTimeThisWeek.xAxis
          this.chart2.series[0].data = _data.deviceUseTimeThisWeek.series[0]['主提升水泵']
          this.chart2.series[1].data = _data.deviceUseTimeThisWeek.series[1]['副提升水泵']
          this.chart2.series[2].data = _data.deviceUseTimeThisWeek.series[2]['主曝气风机']
          this.chart2.series[3].data = _data.deviceUseTimeThisWeek.series[3]['副曝气风机']
        })
      }
    }
  }
</script>

<style scoped>
  @import '../../../style/water.css';
  .echarts {
    height: 80%;
    width: 100%;
  }
</style>